<template>
  <ul class="chooser">
    <li v-for="(item,index) in selections" :class="{active : (nowIndexs.indexOf(index) > -1)}" @click="fnMultiplyChooseIndex(index)">{{item.label}}</li>
  </ul>
</template>

<script lang="ts">
  import Vue from 'vue'
  import {Component, Prop, Emit} from 'vue-property-decorator'

  //引入组件
  @Component
  export default class MultiplyChooser extends Vue {
    //选项列表
    @Prop({ type:Array })
    selections

    //当前选中的index
    nowIndexs = []

    //methods
    //返回父组件
    @Emit()
    emitOnChange(vals){}

    //选中值
    fnMultiplyChooseIndex(index: number) {
      if (this.nowIndexs.indexOf(index) == -1) {
        this.nowIndexs.push(index)
      } else {
        for(let i=0;i<this.nowIndexs.length;i++){
          if (this.nowIndexs[i] == index) {
            this.nowIndexs.splice(i,1)
            break
          }
        }
      }

      let chooseVals = []
      for(let i=0;i<this.nowIndexs.length;i++) {
        chooseVals.push(this.selections[this.nowIndexs[i]])
      }
      this.emitOnChange(chooseVals)
    }
  }
</script>

<style lang="scss" scoped>
  .chooser {
    list-style: none;
    display: flex;
    flex-direction: row;

    li {
      padding:7px 15px;
      margin-right: 10px;
      border-radius: 3px;
      cursor: pointer;
    }

    .active {
      background: #4fc08d;
      color: #fff;
    }
  }
</style>
